<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta content="telephone=no" name="format-detection">
        <title>水果姐姐</title>
        <link type="text/css" rel="stylesheet" href="css/index.css"/>
		<script src="js/zepto.min.js"></script>
		<script type="text/javascript">window.jQuery=window.Zepto;</script>
		<script type="text/javascript" src="js/common.js"></script>        
    </head>
    <body>
<style type="text/css">
    /*图片尺寸修改后 必须改此尺寸  多平台时需要适配*/
	 .container1 img{
		width:320px;
		height:180px;
		margin:0px auto;
	}
	.container1 {
		width:320px;
		height:180px;
		margin:0px auto;
		text-align:center;
	}
    .pic-num1 {
		position: absolute;
		left: 0;
		bottom: 3px;
		width: 320px;
		height: 10px;
		text-align: center;
    }
    .pic-num1 li {
		display: inline-block;
		width: 7px;
		height: 7px;
		margin-left: 7px;
		border-radius: 6px;
		background-color: #63CE49;
		text-indent: -9999px;
    }
	.pic-num1 li.on {
        background-color: #e4393c;
    }

</style>    
       <div id="container">
       	<div id="header">
       		<div class="title">深大水果姐姐</div>
       	</div>
<!--        	<div id="advertis">
       		<marquee width="310px" height="25px" direction="left" scrollamount="3" behavior="scroll">
       			8点至24点营业,0元起送,15分钟左右送到。
       		</marquee>
       	</div> -->
       	<div class="content">
			<div class="index-ads w">
			  <div class="container1" id="idContainer2" ontouchmove="touchMove(event);" ontouchend="touchEnd(event);" style="text-align: center; position: relative; overflow: hidden;">
			    <div style=" position:relative;height:100px;">
			      <table id="idSlider2" border="0" cellpadding="0" cellspacing="0" style="height: 100px; position: absolute; left: -608px;">
			        <tbody>
			          <tr>
			            <td><a href="http://m.jd.com/activity/list.action?activityId=8965&sid=89bec302bfe1757c8702933602c3984a"> <img src="images/banner.png" alt="深大水果姐姐" style="box-shadow:-2px 2px 2px #999;"> </a></td>
			            <td><a href="http://m.jd.com/activity/list.action?activityId=9922&sid=89bec302bfe1757c8702933602c3984a"> <img src="images/index-ad1.jpg" alt="畅销童书半价5折封顶" style="box-shadow:-2px 2px 2px #999;"> </a></td>
			            <td><a href="http://m.jd.com/activity/list.action?activityId=9795&sid=89bec302bfe1757c8702933602c3984a"> <img src="images/index-ad2.jpg" alt="当季女性 数码时尚志" style="box-shadow:-2px 2px 2px #999;"> </a></td>
			            <td><a href="http://m.jd.com/activity/list.action?activityId=9838&sid=89bec302bfe1757c8702933602c3984a"> <img src="images/index-ad3.jpg" alt="七夕书碟全场满98+2赠畅品" style="box-shadow:-2px 2px 2px #999;"> </a></td>
			            <td><a href="http://m.jd.com/activity/list.action?activityId=9702&sid=89bec302bfe1757c8702933602c3984a"> <img src="images/index-ad4.jpg" alt="回到初love 百货七夕大促" style="box-shadow:-2px 2px 2px #999;"> </a></td>
			          </tr>
			        </tbody>
			      </table>
			    </div>
			    <ul class="pic-num1" id="idNum">
			
			    </ul>
			  </div>
			</div>
			
			<input type="hidden" value="5" id="activity"> 	
<!--        		<div class="banner">
       			<img src="images/banner.png"/>
       		</div> -->
       		<div class="sub_content">
       			<table cellspacing="0" cellpadding="0">
       				<tbody>
       					<tr>
       						<td class="space"></td>
       						<td class="category">
       							<a href="listProduct.html">
       							<div id="inland_fruit_btn">
       								<img src="images/inland_fruit.png"/>
       							</div>
       							<span class="category_des">国内水果</span>
       							</a>
       						</td>
       						<td class="space"></td>
       						<td class="category">
       							<div id="foreign_fruit_btn">
       								<img src="images/foreign_fruit.png"/>
       							</div>
       							<span class="category_des">进口水果</span>
       						</td>
       						<td class="space"></td>
       						<td class="category">
       							<div id="gift_fruit_btn">
       								<img src="images/gift_fruit.png"/>
       							</div>
       							<span class="category_des">礼品水果</span>
       						</td>
       						<td class="space"></td>
       					</tr>
       					<tr>
       						<td class="space"></td>
       						<td class="category">
       							<div id="rules_btn">
       								<img src="images/rules.png"/>
       							</div>
       							<span class="category_des">配送规则</span>
       						</td>
       						<td class="space"></td>
       						<td class="category">
       							<div id="communication_btn">
       								<img src="images/communication.png"/>
       							</div>
       							<span class="category_des">大家吐槽</span>
       						</td>
       						<td class="space"></td>
       						<td class="category">
       							<div id="aboutus_btn">
       								<img src="images/aboutus.png"/>
       							</div>
       							<span class="category_des">关于我们</span>
       						</td>
       						<td class="space"></td>
       					</tr>
       				</tbody>
       			</table>
       		</div>
       	</div>
       </div>
<script type="text/javascript">
	var picCount = $("#activity").val();
	//$(".pic-num1").css("width",(picCount*30)+"px");
	var forEach = function(array, callback){
		for (var i = 0, len = array.length; i < len; i++) { callback.call(this, array[i], i); }
	}
	var st = createPicMove("idContainer2", "idSlider2", picCount);	//图片数量更改后需更改此数值
	var nums = [];
	//插入数字
	for(var i = 0, n = st._count - 1; i <= n;i++){
		//(nums[i] = $("idNum").appendChild(document.createElement("li"))).innerHTML = ++i;
		nums[i] = document.getElementById("idNum").appendChild(document.createElement("li"));
	}
	//设置按钮样式
	st.onStart = function(){
		forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; })
	}

    var touchX = [];
	var touchY = [];
	function touchMove(event) {
		var touches = event.touches;
		var fristTouch = touches[0];
		var lastX = $(window).scrollLeft();
		var lastY = $(window).scrollTop();
		touchX.push(fristTouch.pageX);
		touchY.push(fristTouch.pageY);
		if (touchY.length > 1) {
			event.preventDefault();
			var dis = touchY[touchY.length-2]-touchY[touchY.length-1];
			if(Math.abs(dis)>50){
				window.scrollTo(lastX,window.lastY+dis);
			}
		}
	}
	//触屏  离开屏幕事件
	function touchEnd(event) {
		var touches = event.touches;
		var fristTouch = touches[0];

		if (touchX != undefined && touchX.length > 1) {
			var startX = parseInt(touchX.shift(),10);
			var endX = parseInt(touchX.pop(),10);

			var disValue = Math.abs(startX - endX);

            if (touchY.length > 1) {
                var lastX = $(window).scrollLeft();
                event.preventDefault();
                var dis = touchY[touchY.length - 2] - touchY[touchY.length - 1];
                if (Math.abs(dis) > 50 && Math.abs(dis) > disValue) {
                    window.scrollTo(lastX, window.lastY + dis);
                } else {
                    if (disValue > 50) {
                        event.preventDefault();
                        bindEvent(startX,endX);
                    }
                }
            }else{
               if (disValue > 50) {
                event.preventDefault();
                bindEvent(startX,endX);
            }
            }

			touchX = [];
			touchY = [];
		}
	}

    /**
     *  绑定触屏触发事件
     * @param start
     * @param end
     */
    function bindEvent(start,end){
         if (start >= end) {
                   st.Next();
                } else {
                    st.Previous();
                }
    }
	st.Run();

</script>       
    </body>
</html>
